<template>
  <!-- 环形图 -->
  <div class="echarts-x" ref="ring"></div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted, ref, watch } from "vue";
const props = defineProps({
  total: {
    //总数
    type: Number,
    default: 0,
  },
  value: {
    //显示数
    type: Number,
    default: 0,
  },
  option: {
    //配置项
    type: Object,
    default: () => null,
  },
  color: {
    //中心展示的文字颜色
    type: String,
    default: "#fff",
  },
  ringColor: {
    // 环的颜色
    type: [String, Object],
    default: "rgb(90,111,196)",
  },
  name: {
    // 标题名
    type: String,
    default: "",
  },
  itemBgColor: {
    // 环内部背景颜色
    type: String,
    default: "#eee",
  },
  legendShow: {
    //图例是否显示
    type: Boolean,
    default: true,
  },
  tooltipShow: {
    //鼠标移入是否显示
    type: Boolean,
    default: false,
  },
  title: {
    // title配置
    type: [Object, Array],
    default: () => null,
  },
  secondTitle: {
    // 下方标题
    type: Object,
    default: () => null,
  },
  titleText: {
    // 底部标题文字
    type: String,
    default: "",
  },
  clockwise:{
    // 顺时针逆时针
    type:Boolean,
    default:true
  },
  roundCap:{
    // 是否圆角
    type:Boolean,
    default:true
  },
  position:{
    // 位置
    type:Array,
    default:()=>["50%", "50%"]
  },
  size:{
    // 圆环大小
    type:[Array,String,Number],
    default:()=>['50%','60%']
  },
});
watch(props,()=>{
  init()
})
const ring = ref(null);
const init = () => {
  const myChart = echarts.init(ring.value);
  let text = Math.floor((props.value / props.total) * 100).toFixed(2) + "%";
  const option = {
    title: props.title ?? [
      {
        text,
        left: "center",
        top: "center",
        textStyle: { color: props.color, fontSize: "14px" },
      },
      props["secondTitle"] ?? {
        text: props.titleText,
        left: "center",
        bottom: "10%",
        textStyle: {
          color: "#fff",
          fontWeight: 400,
          fontSize: "14px",
        },
      },
    ],
    tooltip: {
      show: props.tooltipShow,
      trigger: "item",
    },
    legend: {
      show: props.legendShow,
      top: 0,
      left: "center",
      textStyle: {
        color: "#FFF",
      },
    },
    angleAxis: {
      max: props.total, // 总共
      clockwise: props.clockwise, // 顺逆时针
      // 隐藏刻度线
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    radiusAxis: {
      type: "category",
      // 隐藏刻度线
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    polar: {
      center: props.position,
      radius: props.size, //图形大小
    },
    
    series: props['series']??[
      {
        type: "bar",
        showBackground: true,
        backgroundStyle: {
          color: props.itemBgColor,
        },
        data: [
          {
            name: props.name,
            value: props.value,
            itemStyle: {
              color: props.ringColor
            },
          },
        ],
        coordinateSystem: "polar",
        roundCap: props.roundCap,
      },
    ],
  };
  myChart.setOption(props.option ?? option);
  window.addEventListener("resize", () => {
    myChart.resize();
  });
};
onMounted(() => {
  init();
});
</script>
<style scoped>
.echarts-x {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>